<!--
 * @Author: Bennty
 * @Date: 2024-07-08 16:32:33
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-08-28 16:46:23
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" title="新增客户信息" @close="handleClose" width="30%">
        <el-form ref="form" :model="formData" label-position="right" label-width="80px">
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item label="客户名称" prop="customerName">
                        <el-input placeholder="新增后无法被编辑，请慎重填写" v-model="formData.customerName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人" prop="linkName">
                        <!-- <el-select v-model="formData.operator" placeholder="请选择联系人" clearable filterable >
                            <el-option v-for="user in userList" :key="user.userId" :label="user.nickName" :value="user.userId"></el-option>
                        </el-select> -->
                        <el-input placeholder="请输入" v-model="formData.linkName" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item label="客户星级" prop="customerLevel">
                        <span class="level-one">一星客户</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="linkMobile">
                        <el-input placeholder="请输入" v-model="formData.linkMobile"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item label="渠道来源" prop="customerSource">
                        <el-select v-model="formData.customerSource" placeholder="新增后无法被编辑">
                            <el-option v-for="item in props.sources" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系微信" prop="weChat">
                        <el-input placeholder="请输入" v-model="formData.weChat"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="地址识别">
                <el-input placeholder="请输入" v-model="addressIdentify">
                    <template #append>
                        <el-button :icon="Search" @click="handleClickAnalysis" />
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="客户地址" prop="customerAddress">
                <el-cascader filterable clearable :options="pcaTextArr" v-model="selectedOptions"></el-cascader>
            </el-form-item>
            <el-form-item label="地址详情" prop="addressDetail">
                <el-input placeholder="请输入" v-model="formData.addressDetail"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="formData.remark"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { pcaTextArr} from 'element-china-area-data';
import type { FormInstance } from 'element-plus';
import { addCustomerApi, analysisAddressApi } from '@/api/sj/customer-crm/index';
// import useCRMStore from '@/store/modules/crm';

const props = defineProps(['visible','sources']);
const form = ref<FormInstance>();
const addressIdentify = ref<string>();
const data = reactive({
    formData:{
        customerName: undefined,
        linkName: undefined,
        customerLevel: 1,
        linkMobile: undefined,
        weChat: undefined,
        customerSource: undefined,
        province: undefined,
        city: undefined,
        county: undefined,
        addressDetail: undefined,
        remark: undefined,
        signFlag: 0,
        publicFlag: 0
    }
});

const { formData } = toRefs(data);

const rules = reactive({
    customerName:[{required:true,message:'客户名称必填',trigger: 'blur'}],
    linkName: [{required:true,message:'联系人必填',trigger: 'blur'}],

});

const emit = defineEmits(['submit','close']);
const selectedOptions = ref<any[]>([]);

const analysisAddress = async ()=>{
    const { data } = await analysisAddressApi({address:addressIdentify.value});
    selectedOptions.value[0] = data.province;
    selectedOptions.value[1] = data.city;
    selectedOptions.value[2] = data.county; 
    formData.value.addressDetail = data.detail
};

const handleClickAnalysis = () => {
    analysisAddress();
};

watch(selectedOptions,()=>{
    formData.value.province = selectedOptions.value[0];
    formData.value.city = selectedOptions.value[1];
    formData.value.county = selectedOptions.value[2];
},{deep:true});

const handleSubmit = async ()=>{
    const deliverData = {...formData.value}
    await addCustomerApi(deliverData).then((result)=>{
        emit('submit', true);
        handleClose();
    }).catch((error)=>{
        emit('submit', false);
    });
};



const handleClose = ()=>{
    form.value?.resetFields();
    addressIdentify.value = '';
    selectedOptions.value = [];
    emit('close');
};

</script>

<style scoped>
.level-one{
    color: yellowgreen;
}
.dialog-footer{
    display:flex;
    justify-content: center;
}
</style>